<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
			1.元素
			2.类名选择器
			3.id名
			4.关系选择器
			    子孙 标志是空格
			    子 >
			  兄弟~
			  相邻+
			5.组，
			6.统配*
			7.伪类选择器 ：
			8.伪对象 ：：
			9.属性选择器 []
		-->
		<style type="text/css">
			.web .test1{
				margin: 0 auto;
				width: 100px;
				height: 100px;
				background: skyblue;
				transition: all .5s;
			}
			.test1:hover{
				transform: translateY(-16px);
				box-shadow: 5px 5px 20px burlywood;
				background: hotpink;
				transition: 1s;
			}
			.web > ul li{
				list-style-position:inside;
				padding: 20px;
				height: 30px;
				line-height: 30px;
				/*list-style: disc;*/
			}
			
			
			
			
			
			/*伪类元素选择器
			 *        E：hover 选中鼠标悬停在钙元素是的状态
			 *        E：first-child 选中第一个元素（注意：必须同时满足第一个和E选择器）
			 *        E：nth-child(n) 选中第n个孩子
			 *        E:nth-of-type 根据E类型选择第n个孩子
			 *        E：not(s) 所有E选择器里面排除S选择器
			 * */
			
			
			.web > ul li:first-child{
				color: red;
			}
			.web >ul li:nth-child(2){
				color: blue;
				
			}
	        .web > ul li:last-child{
	        	background:red ;
	        	}
	        .web > ul{
	        	list-style-position:inside;
	        }
	        .web > ul li:nth-child(2n){
	          background: firebrick;
	        	
	        }
	        .web> ul li:nth-child(2n+1){
	        	background: gold;
	        }
	        
	        .web ul div:first-of-type{
	        	font-style: italic;
	        }
	        .web ul div:last-of-type{
	        	font-weight: bold;
	        	background: pink;
	        }
	        .web ul div:nth-of-type(2){
	        	background: brown;
	        }
	        .web ul li:not(:nth-child(4)){
	        	font-size: 40px;
	        }
		</style>
		
		
		
		
		
		<div class="web">
			<div class="test1"></div>
			
			
			<ul>
				<li>BGG神教</li>
				<li>一共监护</li>
				<div >高富帅</div>
				<li>无敌888</li>
				<li>只要9999</li>
				<div >高富帅</div>
				<li>苹果就是贵</li>
				<li>吉普牧羊人</li>
				<div >高富帅</div> 
			</ul>
			<style type="text/css">
				.perf{
					width: 300px;
					height: 300px;
					background: skyblue;
					margin: 0 auto;
					overflow: hidden;
					position: relative;
				}
				.perf input[type="checkbox"]:checked + span{
					color: red;
					font-size: 20px;
					
				}
				.perf input[type="checkbox"]:checked~div{
					left: -100px;
				}
				
				
				.perf div{
					height: 100px;
					width: 100px;
					background: red;
					transition: all 1s;
					position: absolute;
					bottom: 0;
					left: 0;
					
				}
				.perf input[type="checkbox"]{
					visibility: hidden;
					width: 0;
					height: 0;
				}
			</style>
			<div class="perf">
			   	<p>爱好</p>
			   	<input id="fav" type="checkbox" />
			  	<label for="fav">男</label>
			   	<div></div>
		</div>
		<style type="text/css">
			.after{
				width: 200px;
				height: 200px;
				background: skyblue;
				margin: 0 auto;
				margin-top: 10px;
			}
			
			
			
			.after::after{
	/*必须要填after*/			content: "是真的吗？";
				
			}
			.after::before{
				content: "大家这么说";
			}
			
			
		</style>
		<!--
			伪对象选择器
				E：after 在E内部的最后追加内容
				E：before在内部的最前面插入内容
		-->
		
		
		<div class="after">
			<span>蓝魔基黎</span>
		</div>
		</div>
		
	</body>
</html>
